<template>
    <div class="index">
        <div class="header">
            <div class="logo">
                <img :src="logoImg" alt="">
                <div class="logoTitle">
                    <div class="title">障碍赛 计时记分系统</div>
                    <div class="company">盈越体育</div>
                </div>
            </div>
            <div class="devices">
                <div class="item">
                    <div class="lab">设备时钟</div>
                    <div class="value">{{tsJump.utils.ms2Ticker(tsJump.times.nowTime)}}</div>
                </div>
                <div class="item">
                    <i class="fa fa-server sliderBtn"></i>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="resultArea">
                <div class="resultPan">
                    <div class="resultHeader">
                        <div class="title">
                            参赛信息
                        </div>
                        <div class="ids">
                            {{dicts.resultInfo.curMatchId}} / {{dicts.resultInfo.spResId1}} / {{dicts.resultInfo.spResId2}}
                        </div>
                    </div>
                    <ul class="lstInfos"> 
                        <li>
                            <i class="fa fa-circle-o icon"></i> 
                            <div class="item">
                                <div class="lab">场次名称</div>
                                <div class="value">{{dicts.resultInfo.curMatchName}}</div>
                            </div>
                        </li> 
                        <li>
                            <i class="fa fa-circle-o icon"></i> 
                            <div class="item">
                                <div class="lab">出场序号</div>
                                <div class="value">{{dicts.resultInfo.spResOrder1}}</div>
                            </div>
                        </li>
                        <li>
                            <i class="fa fa-circle-o icon"></i> 
                            <div class="item">
                                <div class="lab">单位</div>
                                <div class="value">{{dicts.resultInfo.orgName}}</div>
                            </div>
                        </li>
                        <li>
                            <i class="fa fa-circle-o icon"></i> 
                            <div class="item">
                                <div class="lab">马匹</div>
                                <div class="value">{{dicts.resultInfo.athName}}</div>
                            </div>
                        </li>
                        <li>
                            <i class="fa fa-circle-o icon"></i> 
                            <div class="item">
                                <div class="lab">场次编号</div>
                                <div class="value">{{dicts.resultInfo.horseBib}} / {{dicts.resultInfo.horseName}}</div>
                            </div>
                        </li>  
                    </ul>
                </div>
            </div>


            <div class="splits">
                <!--赛段 0-->
                <div class="splitPan">
                    <div class="panHeader">
                        <div class="title"> {{tsJump.splits.t0.settingsInfo.secondAllow}} 秒</div>
                        <div class="acs">
                            <div class="stAcs flex">
                                <el-button v-if="tsJump.splits.t0.enableStart" @click="acSplit('t0' , 'start')" size="small" type="success"> 开始</el-button>
                                <el-button v-if="tsJump.splits.t0.enablePause" @click="acSplit('t0' , 'switchPause')" size="small" type="primary"> 暂停</el-button>
                                <el-button v-if="tsJump.splits.t0.enableResume" @click="acSplit('t0' , 'switchPause')" size="small" type="success"> 继续</el-button>
                                <el-button v-if="tsJump.splits.t0.enableEnd" @click="acSplit('t0' , 'end');" size="small" type="warning"> 停止</el-button>
                                <el-button @click="acSplit('t0' , 'reset')" size="small" type="danger"> 复位</el-button>
                                <el-button @click="postResult()" size="small" type="primary"><i class="fa fa-save" style="margin-right:7px"></i> 提交成绩</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="panBody">
                        <div class="infoRow">
                            <div class="item">
                                <div class="clock">{{tsJump.splits.t0.dispSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="splitTimes">
                                    <div class="stItem">
                                        <div class="lab">开始</div>
                                        <div class="value">{{tsJump.splits.t0.dispStartTime}}</div>
                                        <div class="stAcs flex">
                                            <el-button @click="acForceSetTime(tsJump.splits.t0 , 'start' , 0)" size="small" type="danger"> 清除</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t0 , 'start' , 'C3')" size="small" type="warning"> C3</el-button>
                                            <el-button @click="setSignalC3Time(tsJump.splits.t0 , 'start' )" size="small" type="primary"> 设置</el-button>
                                        </div> 
                                    </div>

                                    <div class="stItem">
                                        <div class="lab">完成</div>
                                        <div class="value">{{tsJump.splits.t0.dispEndTime}}</div>
                                        <div class="stAcs flex">
                                            <el-button @click="acForceSetTime(tsJump.splits.t0 , 'end' , 0)" size="small" type="danger"> 清除</el-button> 
                                        </div> 
                                    </div>
                                </div>
                            </div>  
                        </div>
                    </div>
                </div> 
                <!--赛段 1-->
                <div class="splitPan">
                    <div class="panHeader">
                        <div class="title">赛段 1</div>
                        <div class="infos">
                            <div class="item">
                                <div class="lab">允许时间</div>
                                <div class="value">{{tsJump.splits.t1.settingsInfo.secondAllow}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">限定时间</div>
                                <div class="value">{{tsJump.splits.t1.settingsInfo.secondLimited}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">超时</div>
                                <div class="value over">{{tsJump.utils.fixed( tsJump.splits.t1.dispOverTime, tsJump.splits.t1.settingsInfo.timeDecSize)}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">时间罚分</div>
                                <div class="value over">{{ tsJump.utils.fixed( tsJump.splits.t1.penTime , tsJump.splits.t1.settingsInfo.scoreDecSize)}}</div>
                            </div>
                        </div>
                        <div class="acs"> 
                            <div class="stAcs flex">
                                <el-button v-if="tsJump.splits.t1.enableStart" @click="acSplit('t1' , 'start')" size="small" type="success"> 开始</el-button>
                                <el-button v-if="tsJump.splits.t1.enablePause" @click="acSplit('t1' , 'switchPause')" size="small" type="primary"> 暂停</el-button>
                                <el-button v-if="tsJump.splits.t1.enableResume" @click="acSplit('t1' , 'switchPause')" size="small" type="success"> 继续</el-button>
                                <el-button v-if="tsJump.splits.t1.enableEnd" @click="acSplit('t1' , 'end')" size="small" type="warning"> 停止</el-button>
                                <el-button @click="acSplit('t1' , 'reset')" size="small" type="danger"> 复位</el-button>
                            </div> 
                            <div class="resIrm flex">
                                <el-select placeholder="判罚"  @change="onSetIrm(tsJump.splits.t1 , spIrm1)" size="small" v-model="spIrm1" style="width:60px; margin-right:5px">                                            
                                    <el-option v-for="item in dicts.irms" :key="item" :label="item" :value="item"></el-option>
                                </el-select> 
                            </div>
                        </div>
                    </div>
                    <div class="panBody">
                        <div class="infoRow">
                            <div class="item">
                                <div class="clock">{{tsJump.splits.t1.dispSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="splitTimes">
                                    <div class="stItem">
                                        <div class="lab">开始</div>
                                        <div class="value">{{tsJump.splits.t1.dispStartTime}}</div>
                                        <div class="stAcs flex">
                                            <el-button @click="acForceSetTime(tsJump.splits.t1 , 'start' , 0)" size="small" type="danger"> 清除</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t1 , 'start' , 'C0')" size="small" type="success"> C0</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t1 , 'start' , 'C3')" size="small" type="warning"> C3</el-button>
                                            <el-button @click="setSignalC3Time(tsJump.splits.t1 , 'start' )" size="small" type="primary"> 设置</el-button>
                                        </div> 
                                    </div>
                                    <div class="stItem">
                                        <div class="lab">完成</div>
                                        <div class="value">{{tsJump.splits.t1.dispEndTime}}</div>
                                        <div class="stAcs flex">
                                            <el-button @click="acForceSetTime(tsJump.splits.t1 , 'end' , 0)" size="small" type="danger"> 清除</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t1 , 'end' , 'C1')" size="small" type="success"> C1</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t1 , 'end' , 'C3')" size="small" type="warning"> C3</el-button>
                                            <el-button @click="setSignalC3Time(tsJump.splits.t1 , 'end' )" size="small" type="primary"> 设置</el-button>
                                        </div> 
                                    </div> 
                                </div>
                            </div>   
                        </div>
                        <div class="pen">
                            <div class="item">
                                <div class="lab">障碍罚分</div>
                                <div class="edits">
                                    <div @click="acSetScore(tsJump.splits.t1 , 'failScore' , -1 * tsJump.splits.t1.settingsInfo.penScoreFail)" class="btn">
                                        <i class="fa fa-minus"></i> {{tsJump.splits.t1.settingsInfo.penScoreFail}}
                                    </div>
                                    <div class="in"><el-input v-model="tsJump.splits.t1.info.failScore" size="large"  style="width:60px; "></el-input></div>
                                    <div @click="acSetScore(tsJump.splits.t1 , 'failScore' ,  1 * tsJump.splits.t1.settingsInfo.penScoreFail)" class="btn">
                                        <i class="fa fa-plus"></i> {{tsJump.splits.t1.settingsInfo.penScoreFail}}
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="lab">拒跳罚分</div>
                                <div class="edits">
                                    <div @click="acSetScore(tsJump.splits.t1 , 'refuseScore' , -1 * tsJump.splits.t1.settingsInfo.penScoreRefuse)" class="btn">
                                        <i class="fa fa-minus"></i> {{tsJump.splits.t1.settingsInfo.penScoreRefuse}}
                                    </div>
                                    <div class="in"><el-input v-model="tsJump.splits.t1.info.refuseScore" size="large"  style="width:60px; "></el-input></div>
                                    <div @click="acSetScore(tsJump.splits.t1 , 'refuseScore' ,  1 * tsJump.splits.t1.settingsInfo.penScoreRefuse)" class="btn">
                                        <i class="fa fa-plus"></i> {{tsJump.splits.t1.settingsInfo.penScoreRefuse}}
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="lab">校正时间(S)</div>
                                <div class="edits">
                                    <div @click="acSetScore(tsJump.splits.t1 , 'delaySecond' , -1 * tsJump.splits.t1.settingsInfo.penSecond)" class="btn">
                                        <i class="fa fa-minus"></i> {{tsJump.splits.t1.settingsInfo.penSecond}}
                                    </div>
                                    <div class="in"><el-input v-model="tsJump.splits.t1.info.delaySecond" size="large"  style="width:60px; "></el-input></div>
                                    <div @click="acSetScore(tsJump.splits.t1 , 'delaySecond' ,  1 * tsJump.splits.t1.settingsInfo.penSecond)" class="btn">
                                        <i class="fa fa-plus"></i> {{tsJump.splits.t1.settingsInfo.penSecond}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="static">
                            <div class="item">
                                <div class="lab">状态</div>
                                <div class="value">{{tsJump.splits.t1.statusName}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">失误</div>
                                <div class="value">{{tsJump.splits.t1.info.failScore}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">拒跳</div>
                                <div class="value">{{tsJump.splits.t1.info.refuseScore}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">用时</div>
                                <div class="value">{{tsJump.splits.t1.dispSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">暂停</div>
                                <div class="value">{{tsJump.splits.t1.dispPauseSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">罚秒</div>
                                <div class="value">{{tsJump.splits.t1.info.delaySecond}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">超时</div>
                                <div class="value">{{tsJump.splits.t1.dispOverTime}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">障碍罚分</div>
                                <div class="value">{{tsJump.splits.t1.penPoint}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">时间罚分</div>
                                <div class="value">{{tsJump.splits.t1.penTime}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">总罚分</div>
                                <div class="value">{{tsJump.splits.t1.penTotal}}</div>
                            </div>
                        </div>
                    </div>
                </div> 
                <!--赛段 2-->
                <div class="splitPan" v-if="tsJump.hasSplit2">
                    <div class="panHeader">
                        <div class="title">赛段 2</div>
                        <div class="infos">
                            <div class="item">
                                <div class="lab">允许时间</div>
                                <div class="value">{{tsJump.splits.t2.settingsInfo.secondAllow}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">限定时间</div>
                                <div class="value">{{tsJump.splits.t2.settingsInfo.secondLimited}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">超时</div>
                                <div class="value over">{{tsJump.utils.fixed( tsJump.splits.t2.dispOverTime, tsJump.splits.t2.settingsInfo.timeDecSize)}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">时间罚分</div>
                                <div class="value over">{{ tsJump.utils.fixed( tsJump.splits.t2.penTime , tsJump.splits.t2.settingsInfo.scoreDecSize)}}</div>
                            </div>
                        </div>
                        <div class="acs"> 
                            <div class="stAcs flex">
                                <el-button v-if="tsJump.splits.t2.enableStart" @click="acSplit('t2' , 'start')" size="small" type="success"> 开始</el-button>
                                <el-button v-if="tsJump.splits.t2.enablePause" @click="acSplit('t2' , 'switchPause')" size="small" type="primary"> 暂停</el-button>
                                <el-button v-if="tsJump.splits.t2.enableResume" @click="acSplit('t2' , 'switchPause')" size="small" type="success"> 继续</el-button>
                                <el-button v-if="tsJump.splits.t2.enableEnd" @click="acSplit('t2' , 'end')" size="small" type="warning"> 停止</el-button>
                                <el-button @click="acSplit('t2' , 'reset')" size="small" type="danger"> 复位</el-button>
                            </div> 
                            <div class="resIrm flex">
                                <el-select placeholder="判罚" @change="onSetIrm(tsJump.splits.t2 , spIrm2)" size="small" v-model="spIrm2" style="width:60px; margin-right:5px">                                            
                                    <el-option v-for="item in dicts.irms" :key="item" :label="item" :value="item"></el-option>
                                </el-select> 
                            </div>
                        </div>
                    </div>
                    <div class="panBody">
                        <div class="infoRow"> 
                            <div class="item">
                                <div class="clock">{{tsJump.splits.t2.dispSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="splitTimes">
                                    <div class="stItem">
                                        <div class="lab">开始</div>
                                        <div class="value">{{tsJump.splits.t2.dispStartTime}}</div>
                                        <div class="stAcs flex">
                                            <!--
                                            <el-button @click="acForceSetTime(tsJump.splits.t2 , 'start' , 0)" size="small" type="danger"> 清除</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t2 , 'start' , 'C0')" size="small" type="success"> C0</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t2 , 'start' , 'C3')" size="small" type="warning"> C3</el-button>
                                            <el-button @click="setSignalC3Time(tsJump.splits.t2 , 'start' )" size="small" type="primary"> 设置</el-button>
                                            -->
                                        </div> 
                                    </div>
                                    <div class="stItem">
                                        <div class="lab">完成</div>
                                        <div class="value">{{tsJump.splits.t2.dispEndTime}}</div>
                                        <div class="stAcs flex">
                                            <el-button @click="acForceSetTime(tsJump.splits.t2 , 'end' , 0)" size="small" type="danger"> 清除</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t2 , 'end' , 'C2')" size="small" type="success"> C2</el-button>
                                            <el-button @click="acForceSetTimeByLastSignalCode(tsJump.splits.t2 , 'end' , 'C3')" size="small" type="warning"> C3</el-button>
                                            <el-button @click="setSignalC3Time(tsJump.splits.t2 , 'end' )" size="small" type="primary"> 设置</el-button>
                                        </div> 
                                    </div> 
                                </div>
                            </div>  
                        </div>
                        <div class="pen">
                            <div class="item">
                                <div class="lab">障碍罚分</div>
                                <div class="edits">
                                    <div @click="acSetScore(tsJump.splits.t2 , 'failScore' , -1 * tsJump.splits.t2.settingsInfo.penScoreFail)" class="btn">
                                        <i class="fa fa-minus"></i> {{tsJump.splits.t2.settingsInfo.penScoreFail}}
                                    </div>
                                    <div class="in"><el-input v-model="tsJump.splits.t2.info.failScore" size="large"  style="width:60px; "></el-input></div>
                                    <div @click="acSetScore(tsJump.splits.t2 , 'failScore' ,  1 * tsJump.splits.t2.settingsInfo.penScoreFail)" class="btn">
                                        <i class="fa fa-plus"></i> {{tsJump.splits.t2.settingsInfo.penScoreFail}}
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="lab">拒跳罚分</div>
                                <div class="edits">
                                    <div @click="acSetScore(tsJump.splits.t2 , 'refuseScore' , -1 * tsJump.splits.t2.settingsInfo.penScoreRefuse)" class="btn">
                                        <i class="fa fa-minus"></i> {{tsJump.splits.t2.settingsInfo.penScoreRefuse}}
                                    </div>
                                    <div class="in"><el-input v-model="tsJump.splits.t2.info.refuseScore" size="large"  style="width:60px; "></el-input></div>
                                    <div @click="acSetScore(tsJump.splits.t2 , 'refuseScore' ,  1 * tsJump.splits.t2.settingsInfo.penScoreRefuse)" class="btn">
                                        <i class="fa fa-plus"></i> {{tsJump.splits.t2.settingsInfo.penScoreRefuse}}
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="lab">校正时间(S)</div>
                                <div class="edits">
                                    <div @click="acSetScore(tsJump.splits.t2 , 'delaySecond' , -1 * tsJump.splits.t2.settingsInfo.penSecond)" class="btn">
                                        <i class="fa fa-minus"></i> {{tsJump.splits.t2.settingsInfo.penSecond}}
                                    </div>
                                    <div class="in"><el-input v-model="tsJump.splits.t2.info.delaySecond" size="large"  style="width:60px; "></el-input></div>
                                    <div @click="acSetScore(tsJump.splits.t2 , 'delaySecond' ,  1 * tsJump.splits.t2.settingsInfo.penSecond)" class="btn">
                                        <i class="fa fa-plus"></i> {{tsJump.splits.t2.settingsInfo.penSecond}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="static">
                            <div class="item">
                                <div class="lab">状态</div>
                                <div class="value">{{tsJump.splits.t2.statusName}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">失误</div>
                                <div class="value">{{tsJump.splits.t2.info.failScore}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">拒跳</div>
                                <div class="value">{{tsJump.splits.t2.info.refuseScore}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">用时</div>
                                <div class="value">{{tsJump.splits.t2.dispSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">暂停</div>
                                <div class="value">{{tsJump.splits.t2.dispPauseSecond}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">罚秒</div>
                                <div class="value">{{tsJump.splits.t2.info.delaySecond}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">超时</div>
                                <div class="value">{{tsJump.splits.t2.dispOverTime}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">障碍罚分</div>
                                <div class="value">{{tsJump.splits.t2.penPoint}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">时间罚分</div>
                                <div class="value">{{tsJump.splits.t2.penTime}}</div>
                            </div>
                            <div class="item">
                                <div class="lab">总罚分</div>
                                <div class="value">{{tsJump.splits.t2.penTotal}}</div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>

            <div class="tsArea">
                <div class="ledPan">
                    <div class="ledHeader">
                        <div class="title">LED</div>
                        <div class="auto">
                            <el-checkbox v-model="led.autoSend" label="自动发送" border /> 
                        </div>
                    </div>
                    <ul class="lstLed">
                        <li><div @click="sendMsg_welcome('welcome')" class="item"><i class="fa fa-tv"></i><div class="lab">欢迎</div></div></li>
                        <li><div @click="sendMsg_Schedule('')" class="item"><i class="fa fa-tv"></i><div class="lab">竞赛计划</div></div></li>
                        <li><div @click="sendMsg_MatchList('startList')" class="item"><i class="fa fa-tv"></i><div class="lab">出场名单</div></div></li>
                        <li><div @click="sendMsg_Result_Info()" class="item"><i class="fa fa-tv"></i><div class="lab">个人信息</div></div></li>
                        <li><div @click="sendMsg_Result_tsReal('real')" class="item"><i class="fa fa-tv"></i><div class="lab">实时成绩</div></div></li>
                        <li><div @click="sendMsg_Result_tsEnd('end')" class="item"><i class="fa fa-tv"></i><div class="lab">完成成绩</div></div></li>
                        <li><div @click="sendMsg_Result_tsIrm('irm')" class="item"><i class="fa fa-tv"></i><div class="lab">判罚</div></div></li>
                        <li><div @click="sendMsg_MatchList('rank')" class="item"><i class="fa fa-tv"></i><div class="lab">名次公告</div></div></li>
                        <li><div @click="sendMsg_MatchList('medal')" class="item"><i class="fa fa-tv"></i><div class="lab">奖牌榜</div></div></li>
                    </ul>
                </div>
                <div class="signalPan">
                    <div class="flex">
                        <el-checkbox v-model="signalEnables.C0" label="C0" border /> 
                        <el-checkbox v-model="signalEnables.C1"  label="C1" border /> 
                        <el-checkbox v-model="signalEnables.C2"  label="C2" border /> 
                    </div>
                </div>
                <div class="signalLog">
                    
                    <table class="tabSignalLog">
                        <thead>
                            <tr>
                                <th class="colSc">信号</th>
                                <th class="colTm">时间</th>
                                <th class="colAc">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for = "(item,ind) in tsJump.signalLogs" :key="ind" :class="item.sc=='C3'&&ind==c3Index?'c3active':''" >
                                <td class="colSc">{{item.sc}}</td>
                                <td class="colTm">{{item.tmStr}}</td>
                                <td class="colAc">
                                    <div class="acBtns">
                                        <span @click="setSignalLink('C0' , item)" v-if="item.sc=='C0' " class="btn start">开始</span>
                                        <span @click="setSignalLink('C1', item)" v-if="item.sc=='C1' || item.sc=='C2' " class="btn end">完成</span>
                                        <span @click="setSignalLink('C3', item , ind)" v-if="item.sc=='C3' " class="btn select">选择</span>
                                    </div>
                                </td> 
                            </tr>  
                        </tbody>
                    </table>
                    <div class="signalAction">
                        <el-button @click="clearSignalLog" type="primary">清除日志</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    
    import { api , TWsClient} from '@/assets/api';
    import { TTsJumpCore  } from './jumpTsUtils'; 
    var wsClient = new TWsClient();    


    export default {
        mounted(){
            var me = this;
            try {   
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{
                pageStateKey:"jumpTs.ts.stateKey" ,
                pageState:{ 
                },
                logoImg: require('./imgs/yylogo.jpg'),
                dicts:{ 
                    resultInfo:{},
                    msgMatchInfo:{},
                    msgResultInfo:{},
                    irms:["","EL","WD","RT","DSQ","DNS"]
                }, 
                tsJump : new TTsJumpCore(),  
                signalEnables:{
                    C0: false ,
                    C1: false ,
                    C2: false ,
                    C3: true ,
                    C4: true ,
                    C5: true
                },
                led:{
                    autoSend: true
                },
                c3Index:0,
                spIrm1:"",
                spIrm2:"", 
                sessions:{}
            }
        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try { 
                        me.pageState = api.getSessionObj(me.pageStateKey , me.pageState); 
                        me.initResultInfo().then(_=>{
                            var resultId = me.dicts.resultInfo.spResId1;
                            return me.tsJump.init(resultId )
                        }).then(_=>{
                            me.initWsClient(); 
                            su();
                        })
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            initWsClient(){
                var me = this;
                try { 
                    if( wsClient!=null){
                        wsClient.forceCloseFlag = true;
                        wsClient.disconnect(); 
                        wsClient = null;
                    } 
                    wsClient = new TWsClient(); 
                    var onConnectedChanged=(sender , data)=>{
                        var me = this;
                        try {  
                            console.log('onConnectedChanged' ,data , wsClient.settings.wsUrl)
                            if( data){
                                wsClient.sendMsg("regist" , {srcId: wsClient.peerId })
                            }
                        } catch (error) {
                            console.log(error)
                        }
                    };
                    var  onSessionChanged=(sender , data)=>{
                        var me = this;
                        try {  
                            me.sessions = data;
                            console.log('onSessionChanged' ,data) 
                        } catch (error) {
                            console.log(error)
                        }
                    }; 
                    var onMsg = (sender , msg)=>{
                        var me = this;
                        try { 
                            if( msg.data.msgType=='SignalCode') {
                                console.log('jump msg' , msg);
                                var sc = msg.data.msgData.s ;
                                var tm = msg.data.msgData.t ; 
                            } 
                            else if( msg.data.msgType=='RunningTime'){ 
                                var devTime = msg.data.msgData.t;  
                            }
                        } catch (error) {
                            console.log(error)
                        }
                    }
                    api.callApi("equTsV1_obj", "getObj", { objKey: "tsEquSettings" }).then(re => {
                        try {
                            if (re.status == 1) {
                                var wsUrl = re.result;
                                console.log(wsUrl); 
                                wsClient.init(
                                    wsUrl ,
                                    "tsJump2025SH",
                                    ["regist", "sessionChanged", "feiScb" ],
                                    onConnectedChanged ,
                                    onSessionChanged ,
                                    onMsg, 
                                    { clientType:'障碍赛控制台' }
                                );
                                wsClient.connect()
                            }
                        } catch (err) {
                            console.log(err)
                        } 
                    })
                } catch (error) {
                    console.log(error) 
                }
            },  
            initResultInfo(){
                var me = this;
                return new Promise((su,fa)=>{
                    try { 
                        var ps = {
                            resultId : me.$route.query.rId
                        };
                        api.query("getTsResult" , ps).then(_res=>{ 
                            try{
                                me.dicts.resultInfo = _res.recordset[0];
                                me.dicts.msgMatchInfo = me.getMsgMatchInfo();
                                me.dicts.msgResultInfo = me.getMsgResultInfo();
                                me.tsJump.resultId = me.dicts.resultInfo.spResId1;
                                me.tsJump.settings.matchFormat = me.dicts.resultInfo.matchFormat;
                                me.tsJump.settings.t0.settingsInfo = JSON.parse( me.dicts.resultInfo.spSettingInfoJson0);
                                me.tsJump.settings.t1.settingsInfo = JSON.parse( me.dicts.resultInfo.spSettingInfoJson1);
                                me.tsJump.settings.t2.settingsInfo = JSON.parse( me.dicts.resultInfo.spSettingInfoJson2);
                                me.spIrm1 = me.tsJump.splits.t1.info.irm;
                                me.spIrm2 = me.tsJump.splits.t2.info.irm;
                                me.tsJump.onAction =  (split, acCode, acTime, value, tag) => {
                                    console.log("split action", split.code, acCode, acTime, value, tag);
                                    //me.ledPlay('real');
                                    if( acCode=='end' && split.code=='t1' && split.info.irm=='' && (me.tsJump.settings.matchFormat=='2PSP--' || me.tsJump.settings.matchFormat=='2P----')){
                                        me.tsJump.autoSetSplit2Start();
                                    }
                                }
                                me.tsJump.loadStatus();
                                console.log(me.dicts.resultInfo);
                                console.log(me.tsJump);
                            }
                            catch(er){
                                if(!(me.dicts.resultInfo )){                                    
                                    me.dicts.resultInfo  = {};
                                }
                                console.log(er);
                            }
                            su();
                        });
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                });
            },
            getMsgMatchInfo(){
                var me = this;
                var res = {}
                try { 
                    res.matchId = me.dicts.resultInfo.curMatchId;
                    res.matchCode = me.dicts.resultInfo.curMatchCode;
                    res.matchName = me.dicts.resultInfo.curMatchName;
                    res.matchNameEn = me.dicts.resultInfo.curMatchNameEn; 
                    res.eventName = me.dicts.resultInfo.eventName;
                    res.eventNameEn = me.dicts.resultInfo.eventNameEn; 
                } catch (error) {
                    console.log(error)
                }
                return res;
            },
            getMsgResultInfo(){
                var me = this;
                var res = {}
                try { 
                    res.matchId = me.dicts.resultInfo.curMatchId;
                    res.matchCode = me.dicts.resultInfo.curMatchCode;
                    res.matchName = me.dicts.resultInfo.curMatchName;
                    res.matchNameEn = me.dicts.resultInfo.curMatchNameEn; 
                    res.orgId = me.dicts.resultInfo.orgId; 
                    res.orgCode = me.dicts.resultInfo.orgCode; 
                    res.orgName = me.dicts.resultInfo.orgName; 
                    res.orgNameEn = me.dicts.resultInfo.orgNameEn; 
                    res.athOrder = me.dicts.resultInfo.spResOrder1; 
                    res.athName = me.dicts.resultInfo.athName; 
                    res.athNameEn = me.dicts.resultInfo.athNameEn; 
                    res.horseBib = me.dicts.resultInfo.horseBib; 
                    res.horseName = me.dicts.resultInfo.horseName; 
                    res.horseNameEn = me.dicts.resultInfo.horseNameEn;  
                    res.settings={
                        t0: JSON.parse( me.dicts.resultInfo.spSettingInfoJson0) ,
                        t1: JSON.parse( me.dicts.resultInfo.spSettingInfoJson1) ,
                        t2: JSON.parse( me.dicts.resultInfo.spSettingInfoJson2) ,
                    };
                } catch (error) {
                    console.log(error)
                }
                return res;
            },
            getWsUrl(){
                var me = this;
                var res = "";
                return new Promise((su,fa)=>{
                    try {
                        api.callApi("jumpTs2025_obj", "getObj", { objKey: "tsEquSettings" }).then(re => {
                            try {
                                if (re.status == 1) {
                                    res = re.result;
                                }
                            } catch (err) {
                                console.log(err)
                            }
                            su(res);
                        })
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            initWsClient(){
                var me = this;
                try { 
                    if( wsClient!=null){
                        wsClient.forceCloseFlag = true;
                        wsClient.disconnect(); 
                        wsClient = null;
                    } 
                    wsClient = new TWsClient();
                    me.getWsUrl().then(_url=>{
                        var wsUrl =  _url.wsUrl;
                        //wsUrl="ws://192.168.1.20:20258/wsinfoapi"
                        console.log(wsUrl); 
                        wsClient.init(
                            wsUrl ,
                            "jumpTs2025",
                            ["regist", "sessionChanged", "pub"],
                            me.onConnectedChanged ,
                            me.onSessionChanged ,
                            me.onMsg, 
                            { clientType:'障碍赛控制台' }
                        );
                        wsClient.connect()

                    })
                } catch (error) {
                    console.log(error) 
                }
            },
            onConnectedChanged(sender , data){
                var me = this;
                try {  
                    console.log('onConnectedChanged' ,data , wsClient.settings.wsUrl)
                    if( data){
                        wsClient.sendMsg("regist" , {srcId: wsClient.peerId })
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            onSessionChanged(sender , data){
                var me = this;
                try {  
                    me.sessions = data;
                    console.log('onSessionChanged' ,data) 
                } catch (error) {
                    console.log(error)
                }
            },
            onMsg(sender , msg){
                var me = this;
                try { 
                    if( msg.data.msgType=='SignalCode') {
                        console.log('jump msg' , msg);
                        var sc = msg.data.msgData.s ;
                        var tm = msg.data.msgData.t ; 
                        var tmStr = me.tsJump.utils.ms2Ticker(tm);
                        me.tsJump.signalLogs.splice( 0, 0 , {
                            sc ,
                            tm,
                            tmStr
                        })
                        console.log( me.tsJump.signalLogs);
                        var enableFlag = me.signalEnables[sc] ;
                        if( enableFlag){
                            me.tsJump.actionOnSignal( sc , tm  );
                        }
                    }
                    else if( msg.data.msgType=='ClearSignal'){ 
                    }
                    else if( msg.data.msgType=='RunningTime'){ 
                        var devTime = msg.data.msgData.t;  
                        me.tsJump.setDeviceTime(devTime);

                    }
                } catch (error) {
                    console.log(error)
                }
            },
            onSetIrm(split , irmStatus){
                var me = this;
                try {               
                    var acTime = me.tsJump.times.dev;      
                    this.$confirm('是否确定要设置判罚状态?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'danger'
                    }).then(() => { 
                        split.info.irm =  irmStatus; 
                        me.tsJump.saveStatus();

                        if( irmStatus!="" && split.info.start>0 && split.info.end ==0 ){
                            me.$confirm('是否立即结束比赛' , '结束比赛' ,  {
                                confirmButtonText: '立即结束',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(_=>{
                                split.end(acTime);
                            })
                        }

                    }).catch(() => {
                        if ( split.code=='t1'){
                            me.spIrm1 = split.info.irm
                        }
                        else if ( split.code=='t2'){
                            me.spIrm2 = split.info.irm
                        }
                    });
                    

                } catch (error) {
                    console.log(error)
                }
            },
            refresh(){
                var me = this;
                try { 
                } catch (error) {
                    console.log(error)
                }
            },
            showTs(resultInfo){
                var me = this;
                try {
                    console.log(resultInfo);
                    var url = "jumpTs?rId="+ resultInfo.resultId;
                    window.open(url,'tsJump')
                } catch (error) {
                    console.log(error)
                }
            },
            acSplit(splitCode , acCode){
                var me = this;
                try {
                    var split = me.tsJump.splits[splitCode];
                    var acTime = me.tsJump.times.nowTime;
                    if( acCode=='start'){
                        split.start(acTime);
                    }
                    else if( acCode=='switchPause'){
                        split.switchPause(acTime);
                    }
                    else if( acCode=='end'){
                        split.end(acTime);
                        /*
                        if( split.code =='t1'){
                            me.autoSetSplit2Start(acTime);
                        }
                        */
                    }
                    else if( acCode=='reset'){
                        split.reset(acTime);
                        if( split.code == 't1' ){
                            me.spIrm1='';
                        }
                        else if( split.code == 't2' ){
                            me.spIrm2='';
                        }
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            acSetScore(split , penKey , value){
                var me = this;
                try {
                    console.log(split , penKey , value)
                    var v = split.info[penKey] + value;
                    if( v<0){
                        v = 0 ;
                    }
                    split.setPenScore( me.tsJump.times.dev , penKey , v)
                } catch (error) {
                    console.log(error)
                }
            },
            acForceSetTime(split , timeKey , acTime){
                var me = this;
                try {
                    console.log(split , timeKey , acTime)
                    if( timeKey=='start'){
                        split.forceSetStartTime(acTime);
                    }
                    else if( timeKey=='end'){
                        split.forceSetEndTime(acTime);
                        /*
                        if( split.code == 't1'){
                            me.autoSetSplit2Start(acTime)
                        }
                        */
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            acForceSetTimeByLastSignalCode(split , timeKey , signalCode){
                var me = this;
                try {
                    console.log(split , timeKey , signalCode);
                    var acTime = -1 ;
                    for (var i=0;i< me.tsJump.signalLogs.length;i++){
                        if( me.tsJump.signalLogs[i].sc==signalCode){
                            acTime = me.tsJump.signalLogs[i].tm;
                            break;
                        }
                    }
                    if( acTime>=0){
                        me.acForceSetTime(split , timeKey , acTime)
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            setSignalLink(signalCode , signalItem , index ){
                var me = this;
                try {
                    console.log(signalCode , signalItem);
                    var acTime = signalItem.tm;
                    console.log('setSignalLink' , signalCode); 
                    if( signalCode=='C0' ){
                        me.tsJump.splits.t1.forceSetStartTime(acTime);
                    }
                    else if( signalCode=='C1' ){
                        me.tsJump.splits.t1.forceSetEndTime(acTime);                        
                        //me.autoSetSplit2Start(acTime);
                    }
                    else if( signalCode=='C2' ){
                        me.tsJump.splits.t2.forceSetEndTime(acTime);
                    }
                    else if( signalCode=='C3' ){
                        me.c3Index = index;
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            setSignalC3Time(split , timeKey ){
                var me = this;
                try {
                    console.log('setSignalC3Time',split , timeKey);
                    var flag = me.c3Index>=0 && me.c3Index< me.tsJump.signalLogs.length ;
                    if( flag ){
                        var signalItem = me.tsJump.signalLogs[me.c3Index];
                        if ( signalItem.sc=='C3'){
                            if( timeKey=='start'){
                                split.forceSetStartTime(signalItem.tm)
                            }
                            else if( timeKey=='end'){
                                split.forceSetEndTime(signalItem.tm);
                                /*
                                if( split.code =='t1'){
                                    me.autoSetSplit2Start(signalItem.tm);
                                }
                                */
                            }
                        }
                    }

                } catch (error) {
                    console.log(error)
                }
            },  
            autoSendReal( irmFlag = false  ){
                var me = this;
                try {
                    if( me.led.autoSend ){
                        var msgType = irmFlag? 'irm':'real';
                        me.ledPlay(msgType)
                    } 
                } catch (error) {
                    console.log(error)
                } 
            },
            saveResult( split , resultId ){
                var me = this;
                try {
                    var ps = me.tsJump.getPostResultInfo(split , resultId);
                    api.execProc("Proc_SaveJumpResult",ps).then(_res=>{ 
                        me.$message.success('成绩已提交!');
                    }) ;
                } catch (error) {
                    console.log(error)
                }
            },
            postResult( ){
                var me = this;
                try {
                    var items = [me.tsJump.getPostResultInfo(me.tsJump.splits.t1 , me.dicts.resultInfo.spResId1)];
                    var split2Flag = me.tsJump.settings.matchFormat=='2PSP--' || me.tsJump.settings.matchFormat=='2P----';
                    if( split2Flag){
                        items.push(me.tsJump.getPostResultInfo(me.tsJump.splits.t1 , me.dicts.resultInfo.spResId1))
                    } 
                    console.log(items)
                    var post=()=>{
                        if( items.length>0 ){
                            var ps = items.shift();
                            api.execProc("Proc_SaveJumpResult",ps).then(_res=>{ 
                                post();
                            }) ;
                        }
                        else{

                        }
                    };
                    post();
                } catch (error) {
                    console.log(error)
                } 
            }, 
            clearSignalLog( ){
                var me = this;
                try {
                    me.tsJump.signalLogs =[];
                    me.tsJump.saveStatus();
                } catch (error) {
                    console.log(error)
                } 
            }, 
            
            sendMsg(tplCode , msgData , forceCloseFlag=0){
                var me = this;
                try {
                    var devTm = me.tsJump.times.nowTime;
                    var msg = {
                        ac: "feiScb",
                        data: {
                            devTime: devTm,
                            tplCode:  tplCode,
                            params: {
                                forceFlag: forceCloseFlag,
                                /*
                                matchId: 0,
                                resultId: 0,
                                scheduleDate: "",
                                tsInfo: {},
                                tag: {}
                                */
                            }
                        }
                    };
                    Object.keys(msgData).forEach( k=>{
                        msg.data.params[k] = msgData[k]; 
                    }); 
                    wsClient.sendData(msg);  
                    

                } catch (error) {
                    console.log(error);
                }
            },
            sendMsg_welcome(){
                var me = this;
                try {
                    me.sendMsg("welcome" ,{} );
                } catch (error) {
                    console.log(error);
                }
            },
            sendMsg_Schedule(scheduleDate =''){
                var me = this;
                try {
                    var shDate = scheduleDate==''?(new Date()).Format("yyyy-MM-dd") : scheduleDate;
                    me.sendMsg("schedule" , {scheduleDate: shDate} , 1 )
                } catch (error) {
                    console.log(error);
                }
            },
            sendMsg_MatchList(tplCode  ){
                var me = this;
                try {
                    var matchId = me.dicts.resultInfo.curMatchId;
                    me.sendMsg(tplCode , {matchId: matchId} , 1 )
                } catch (error) {
                    console.log(error);
                }
            },
            sendMsg_Result_Info(){
                var me = this;
                try {
                    var tplCode = "result";
                    var resultId = me.dicts.resultInfo.spResId1;
                    var ps={
                        resultId ,
                        tsInfo: me.getTsRealData(),
                        tag:{
                            type:"info",
                            resId2:me.dicts.resultInfo.spResId2
                        }
                    }; 
                    me.sendMsg(tplCode , ps , 1 )
                } catch (error) {
                    console.log(error);
                }
            },
            sendMsg_Result_tsReal(){
                var me = this;
                try {
                    var tplCode = "result";
                    var resultId = me.dicts.resultInfo.spResId1;
                    var ps={
                        resultId ,
                        tsInfo: me.getTsRealData(),
                        tag:{
                            type:"real",
                            resId2:me.dicts.resultInfo.spResId2
                        }
                    }; 
                    me.sendMsg(tplCode , ps , 1 )
                } catch (error) {
                    console.log(error);
                }
            },
            sendMsg_Result_tsEnd(){
                var me = this;
                try {
                    var tplCode = "result";
                    var resultId = me.dicts.resultInfo.spResId1;
                    var ps={
                        resultId ,
                        tsInfo: me.getTsRealData(),
                        tag:{
                            type:"end",
                            resId2:me.dicts.resultInfo.spResId2
                        }
                    }; 
                    me.sendMsg(tplCode , ps , 1 )
                } catch (error) {
                    console.log(error);
                }
            }, 
            sendMsg_Result_tsIrm(){
                var me = this;
                try {
                    var tplCode = "result";
                    var resultId = me.dicts.resultInfo.spResId1;
                    var ps={
                        resultId ,
                        tsInfo: me.getTsRealData(),
                        tag:{
                            type:"irm",
                            resId2:me.dicts.resultInfo.spResId2
                        }
                    };
                    me.sendMsg(tplCode , ps , 1 )
                } catch (error) {
                    console.log(error);
                }
            },  
            getTsRealData(){
                var me = this;
                var res ={};
                try {
                    var getSplitRealInfo =(split)=>{
                        return {
                            code: split.code ,
                            irm: split.info.irm,
                            status: split.status ,
                            netTime: split.netTime ,
                            overTime: split.overTime,
                            delaySecond: split.info.delaySecond,
                            penRefuse: split.penRefuse ,
                            penFail: split.penFail ,
                            penPoint: split.penPoint ,
                            penTime: split.penTime ,
                            penTotal: split.penTotal ,
                            isOverTime: split.isOverTime ,
                            isOverLimitedTime: split.isOverLimitedTime ,
                        }
                    }
                    res={
                        t0: getSplitRealInfo(me.tsJump.splits.t0),
                        t1: getSplitRealInfo(me.tsJump.splits.t1),
                        t2: getSplitRealInfo(me.tsJump.splits.t2),
                    }
                    
                } catch (error) {
                    console.log(error);
                }
                return res;
            },  

            ledPlay(tplCmd  ){
                var me = this;
                try { 
                    var msg = {                        
                        ac: "led",
                        tplCmd:tplCmd,
                        devTime: me.tsJump.times.nowTime ,      
                        params :{}, 
                        data:{}
                    };
                    var sendMsg = ()=>{
                        try {
                            wsClient.sendData(msg);                            
                        } catch (er) {
                            console.log(er);
                        }
                    };  
                    if( tplCmd=="welcome"|| tplCmd=="startList"||tplCmd=='rank'||tplCmd=='medal'||tplCmd=='schedule'){
                        if( tplCmd=='schedule' ){                            
                            msg.params.scheduleDate =  ( new Date()).Format("yyyy-MM-dd");
                        }
                        msg.params.matchId = me.dicts.resultInfo.curMatchId;
                        msg.params.matchInfo = me.dicts.msgMatchInfo;
                        sendMsg();
                    }
                    else if( tplCmd=="regcomp"){  
                        msg.params.resultId =  me.dicts.resultInfo.spResId1;  
                        msg.params.resultInfo = me.dicts.msgResultInfo; 
                        sendMsg( );
                    }
                    else if( tplCmd=="real" || tplCmd=="end" || tplCmd=="result"){ 
                        msg.params.resultId =  me.dicts.resultInfo.spResId1;  
                        msg.params.tsInfo ={
                            irm:me.tsJump.splits.t0.info.irm + me.tsJump.splits.t1.info.irm + me.tsJump.splits.t2.info.irm , 
                            t0: me.tsJump.splits.t0.getStaticInfo(),
                            t1: me.tsJump.splits.t1.getStaticInfo(),
                            t2: me.tsJump.splits.t2.getStaticInfo()
                        };                                                  
                        sendMsg( );
                    }
                    else if( tplCmd=="irm"){ 
                        msg.params.resultId =  me.dicts.resultInfo.spResId1; 
                        sendMsg();
                    }
                } catch (error) {
                    console.log(error)
                }
            } 
        }
        
    }
</script>


<style lang="less" scoped>
    .btnicon{
        margin-right: 5px;
    }
    .index{
        height: 100%;
        background-color: #f2f3f9;

        overflow: hidden;
        display: flex;
        flex-direction: column;
        .header{
            display: flex;
            background-color: #fafafa;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            .logo{
                display: flex;
                align-items: center;
                img{
                    height: 40px;
                    line-height: 40px;
                }
                .logoTitle{
                    margin-left: 10px;
                    text-align: left;
                    .title{
                        font-size: 0.85em;
                        font-weight: bold;
                    }
                }
            }
            .devices{
                display: flex;
                align-items: center;
                .item{
                    margin: 0 15px;
                    display: flex;
                    .lab{
                        font-size: 0.85em;
                        color: #797979;
                    }
                    .value{
                        margin-left: 7px   ;
                        font-size: 1.2em;
                        font-weight: bold;
                    }

                    .sliderBtn{
                        height: 48px;
                        line-height: 48px;
                        width: 48px;
                        text-align: center;
                        font-size: 1.5em;
                        font-weight: bold;
                        background-color: #fafafa;
                        border-radius: 3px;
                        color: #797979;
                    }
                    .sliderBtn:hover{
                        cursor: pointer;
                        box-shadow: 0 0 2px 0 #909090;
                        background-color: #fff;
                    }
                }
            }
        }
        .main{
            flex: 1; 
            overflow: hidden;
            position: relative;
            padding: 15px;
            display: flex;
            align-items: flex-start;
            .resultArea{ 
                width: 360px; 
                margin-right:15px; 
                .resultPan{
                    background-color: #fff; 
                    border-radius: 3px;
                    box-shadow: 0 0 3px 0 #e0e0e0; 
                    margin-bottom: 15px;
                    .resultHeader{
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #ddd;
                        align-items: center;
                        .title{ 
                            height: 50px;
                            line-height: 50px;
                            padding-left: 15px;
                            font-weight: bold;
                        }
                        .ids{
                            margin-right: 10px;
                        }

                    }
                    ul.lstInfos{
                        li{
                            display: flex;
                            align-items: center;
                            i.icon{
                                height: 40px;
                                line-height: 40px;
                                width: 40px;
                                text-align: center;
                            }
                            .item{
                                flex: 1;
                                border-bottom: 1px solid #eee;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding-right: 10px;
                                .lab{
                                    color: #797979;
                                    height: 40px;
                                    line-height: 40px;
                                }
                                .value{
                                    font-weight: bold;
                                    max-width: 180px;

                                }
                                .edit{
                                    display: flex;

                                }
                            }
                        }
                    }
                }
                table.tabResult{
                    font-size: 0.9em;
                    width: 100%;
                    margin-bottom: 15px;
                    background-color: #fff;
                    border-collapse: collapse;
                    .colItem{
                        text-align: right;
                    }
                    .colSplit{
                        font-weight: bold;
                    } 
                    th{
                        padding: 10px 0;
                    }
                    td{
                        border-top:1px solid #ddd;
                        padding: 7px 0;
                    }
                }
            }

            .tsArea{
                width: 300px; 
                .ledPan{
                    background-color: #fff;
                    border-radius: 3px;
                    box-shadow: 0 0 3px 0 #e0e0e0;
                    padding: 15px;
                    margin-bottom:15px;

                    .ledHeader{
                        border-bottom: 1px solid #eee;
                        margin-bottom: 15px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-bottom: 10px;
                        .title{
                            font-weight: bold;
                            border-left: 3px solid #0077fe;
                            padding-left: 10px;
                        }
                    }
                    ul.lstLed{
                        display: grid;
                        grid-gap: 10px;
                        grid-template-columns:auto auto auto auto ;
                        li{
                            .item{
                                width:60px;
                                border:1px solid #ddd;
                                padding: 10px 0 ;
                                border-radius: 4px;
                                color: #797979;
                                i{
                                    font-weight: bold;
                                    font-size: 1.3em;                                    
                                }
                                .lab{
                                }
                                font-size: 0.85em;
                            }
                            .item:hover{
                                color: #242424;
                                cursor: pointer;;
                                border:1px solid #0077fe;
                                color: #0077fe;
                            }
                            .item.active{
                                background-color: #0077fe;
                                color: #fff;
                                cursor: pointer;;
                            }
                        }
                    }
                }
                .signalPan{
                    background-color: #fff;
                    margin-bottom:15px;
                    border-radius: 3px;
                    box-shadow: 0 0 3px 0 #e0e0e0;
                    padding: 15px; 
                }
                table.tabSignalLog{
                    font-size: 0.9em;
                    width: 100%;
                    margin-bottom: 15px;
                    background-color: #fff;
                    border-collapse: collapse; 
                    th{
                        padding: 10px 0;
                    }
                    td{
                        border-top:1px solid #ddd;
                        padding: 9px 0;
                    }
                    .colSc{
                        width: 50px;
                    }
                    .colTm{
                        widows: 120px;
                    }
                    .colAc{
                        .acBtns{ 
                            display: flex;
                            justify-content: space-between;
                            .btn {
                                margin-right: 5px;
                            }
                            .btn:hover {
                                cursor: pointer;
                                font-weight: bold;
                            }
                            .start{
                                color: #349706;
                            }
                            .end{
                                color: #cf084a;
                            }
                            .select{
                                color: #0077fe;
                            }
                        }
                    }
                    tr.c3active td{
                        background-color: #909090;
                        color: #fff;
                    }
                }
                .signalLog{
                    .signalAction{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            } 
            .splits{
                flex: 1;
                .splitPan{
                    background-color: #fff; 
                    border-radius: 3px;
                    box-shadow: 0 0 3px 0 #e0e0e0;
                    margin-right:15px;
                    margin-bottom:15px;
                    .panHeader{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px 0px;
                        padding-right: 15px;                        
                        border-bottom: 1px solid #ddd;
                        .title{
                            font-weight: bold;
                            padding-left: 15px;
                            border-left: 3px solid #0077fe;
                        }
                        .infos{
                            display: flex;
                            .item{
                                display: flex;
                                margin: 0 10px;
                                align-items: flex-end;
                                .lab{
                                    font-size: 0.85em;
                                }
                                .value{
                                    font-size: 1.2em;
                                    font-weight: bold;
                                    margin-left:5px
                                }
                                .value.over{
                                    width: 60px;
                                    background-color: #cf084a;
                                    color: #fff;
                                    padding: 5px 0;
                                }
                            }
                        }
                        .acs{
                            display: flex;
                            .resIrm {
                                margin-left: 10px;
                            }
                        }
                    }
                    .panBody{
                        padding: 15px;
                        .infoRow{
                            display: flex;
                            align-items: center;
                            position: relative;
                            .item{
                                margin-right: 25px;
                                display: flex;
                                align-items: center;
                                .clock{
                                    background-color: #f2f3f9;
                                    height: 60px;
                                    line-height: 60px;
                                    width: 130px;
                                    font-weight: bold;
                                    font-size:2.0em;
                                    border-radius: 3px;
                                } 
                                .splitTimes{
                                    .stItem{
                                        display: flex; 
                                        align-items: center;
                                        padding: 5px 0 ;
                                        .lab{
                                            font-size: 1em;
                                            color: #797979;
                                            margin-right: 7px;
                                        }
                                        .value{
                                            font-size: 1.5em;
                                            font-weight: bold;
                                            margin-right: 20px;
                                        }
                                        .stAcs{
                                            margin-right: 10px; 
                                        }
                                    }
                                }
                            }
                            .saveResult{
                                position: absolute;
                                right: 5px;
                                top: 5px;
                            }
                        }
                        .pen{
                            display: flex;
                            justify-content: space-between;
                            border-top: 1px solid #ddd;;
                            padding-top: 10px;
                            margin: 5px 0;
                            .item{
                                display: flex;
                                align-items: center;
                                .lab{
                                     margin-right: 10px;
                                }
                                .edits{
                                    display: flex;
                                    .btn{
                                        height: 40px;
                                        line-height: 40px;
                                        width: 45px;
                                        text-align: center;
                                        margin: 0 5px;
                                        background-color: #f2f3f9;
                                    }
                                    .btn:hover{
                                        cursor: pointer;
                                        box-shadow: 0 0 2px 0px #909090;
                                    }
                                    .btn:active{
                                        cursor: pointer;
                                        background-color: #fafafa;
                                    }

                                }
                            }
                        }
                        .static{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            border-top: 1px solid #eee;
                            padding: 5px;
                            .item{
                                text-align: left;
                                .lab{
                                    font-size: 0.85em;
                                    color: #909090;
                                }
                                .value{
                                    margin-top: 5px;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }
        }
    } 

    ::v-deep .el-input__inner{
        text-align: center;
        font-weight: bold;
        font-size: 1.2em;
    }
</style>